<script setup lang="ts">
import {ref, onMounted, onUnmounted ,reactive} from 'vue';

const contextArea = ref<HTMLElement | null>(null);
const menuVisible = ref(false);
const subMenuVisible = ref(false);
const menuX = ref(0);
const menuY = ref(0);
const subMenuY = ref(0);
const subMenuWidth = ref('auto');

const handleMenuItemClick = (item: string) => {
  alert(`点击了${item}`);
  menuVisible.value = false;
  subMenuVisible.value = false;
};

const hideMenu = () => {
  menuVisible.value = false;
  subMenuVisible.value = false;
};

///计算子菜单的位子
const showSubMenu = (event: MouseEvent, item: string) => {
  const target = event.target as HTMLElement;
  const rect = target.getBoundingClientRect();
  subMenuY.value = rect.y;
  subMenuWidth.value = `${rect.width}px`;
  // subMenuStyle.value.left = `${rect.x}px`;
  subMenuStyle.value.top = `${30*3}px`;
  subMenuStyle.value.width = subMenuWidth.value;
  subMenuVisible.value = true;
  console.log(item);
};

const hideSubMenu = () => {
  subMenuVisible.value = false;
};

const menuStyle = ref({
  position: 'absolute' as const,
  top: '0px',
  left: '0px',
  zIndex: 1000,
  backgroundColor: '#fff',
  border: '1px solid #ccc',
  textAlign: 'left',
  boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
});

const subMenuStyle = ref({
  position: 'absolute' as const,
  top: '0px',
  left: '100%',
  zIndex: 1000,
  backgroundColor: '#fff',
  border: '1px solid #ccc',
  boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
  width: 'auto',
});

onMounted(() => {
  document.addEventListener('click', hideMenu);
});

onUnmounted(() => {
  document.removeEventListener('click', hideMenu);
});

const showMenu = (event: MouseEvent,btnName:String) => {
  event.stopPropagation();
  if (contextArea.value) {
    menuX.value = event.clientX;
    menuY.value = event.clientY;
    menuStyle.value.left = `${menuX.value}px`;
    menuStyle.value.top = `${menuY.value}px`;
    menuVisible.value = true;
  }
  console.log(btnName);
};


let buttons = reactive([
  { label: '首页', selected: true,showMenu:false },
  { label: '学', selected: false,showMenu:false },
  { label: '练', selected: false,showMenu:false },
  { label: '考', selected: false,showMenu:false },
  { label: '评', selected: false,showMenu:false },
  { label: '管', selected: false,showMenu:false },
])
function toggleSelected(name:String) {
  buttons.forEach((e)=>{
    e.selected= false;
  })

  buttons.forEach((e)=>{
    if(e.label===name){
      e.selected = true;
    }else{
      e.selected = false;
    }
  });
  emit('ccc', name);
}

const emit = defineEmits<{
  //定义一个回调方法，可以理解为回调父组件传入的attribute为ccc的方法，入参为一个number类型的变量
  (e: 'ccc', num: String): void,
}>()
///钩子
onMounted(()=>{
  toggleSelected('首');
})

</script>

<template>
  <div class="main">
    <img class="logo" src="../assets/logo.png" height="54px" width="162px" alt="Vue logo" />
    <div>
      <button
          ref="contextArea"
          v-for="(item, index) in buttons"
          :key="index"
          class="context-area"
          :class="{ selected: item.selected,'rounded-left': index !== 0,'border_left':index!=0,'border_left_right':index==(buttons.length-1)}"
          @click="showMenu($event,item.label)"
      >{{item.label}}
      </button>

<!--      <div style="display: flex;flex-direction: row">-->
<!--      <div v-for="(item, index) in buttons"  ref="contextArea" @click="showMenu($event,'学')" class="context-area" :key="index">-->
<!--        啥都扫毒阿斯速递拿督赛到时-->
<!--      </div>-->
<!--      </div>-->

      <transition name="fade">
        <div v-if="menuVisible" :class="menuStyle" class="menu" @mouseleave="hideMenu" @click.stop>
          <div style="font-size:20px;font-weight: bold;padding: 8px 12px;">学习路线</div>
          <div class="menu-item" @click="handleMenuItemClick('培训任务学习')">培训任务学习>></div>
          <div class="menu-item" @click="handleMenuItemClick('个人职业生命学习')">个人职业生命学习>></div>
          <div
              class="menu-item"
              @mouseenter="showSubMenu($event, '菜单项3')"
              @mouseleave="hideSubMenu"
          >
            菜单项3
            <transition name="fade">
              <div
                  v-if="subMenuVisible"
                  :style="subMenuStyle"
                  class="sub-menu"
                  @click.stop
              >
                <div class="menu-item" @click="handleMenuItemClick('子菜单项1')">子菜单项1</div>
                <div class="menu-item" @click="handleMenuItemClick('子菜单项2')">子菜单项2</div>
              </div>
            </transition>
          </div>
        </div>
      </transition>

<!--      <el-menu-->
<!--          mode="horizontal"-->
<!--          class="custom-menu"-->
<!--          :ellipsis='false'-->
<!--          :default-openeds=0-->
<!--          :default-active=0-->
<!--          :collapse-open-icon="icons.AddLocation"-->
<!--      >-->
<!--        <el-menu-item-->
<!--            v-for="(item, index) in buttons"-->
<!--            :key="index"-->
<!--            :index="index.toString()"-->
<!--            @click="toggleSelected(item.label)"-->
<!--            style=".el-menu-item.is-active: 100px"-->

<!--        >{{ item.label }}-->
<!--          <div v-if="index==1">-->
<!--                      <el-sub-menu index="2-4">-->
<!--                        <el-menu-item @click="toggleSelected('培训任务学习')" index="2-4-1">培训任务学习</el-menu-item>-->
<!--                        <el-sub-menu index="2-5">-->
<!--                          <template #title>个人职业生命学习</template>-->
<!--                          <el-menu-item index="2-4-1-1">题库资源</el-menu-item>-->
<!--                          <el-menu-item index="2-4-1-2">课件资源</el-menu-item>-->
<!--                        </el-sub-menu>-->
<!--                      </el-sub-menu>-->
<!--          </div>-->
<!--        </el-menu-item>-->

<!--&lt;!&ndash;        <el-menu-item index="2">&ndash;&gt;-->
<!--&lt;!&ndash;          <template #title>Workspace</template>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-menu-item index="2-1">item one</el-menu-item>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-menu-item index="2-2">item two</el-menu-item>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-menu-item index="2-3">item three</el-menu-item>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-sub-menu index="2-4">&ndash;&gt;-->
<!--&lt;!&ndash;            <template #title>item four</template>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-menu-item index="2-4-1">item one</el-menu-item>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-menu-item index="2-4-2">item two</el-menu-item>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-menu-item index="2-4-3">item three</el-menu-item>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-sub-menu>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-menu-item>&ndash;&gt;-->

<!--      </el-menu>-->
    </div>
    <div class="childStyle">
    <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
    />
      张三
      <el-dropdown>
    <span class="el-dropdown-link">
 <CaretBottom style="width: 1em; height: 1em; margin-right: 8px;color: #f9f9f9" />
    </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style scoped>
.deStyle{
  background: #3C8DF9;
}
.main{
  width: calc(100vw - 30px);/* 原始宽度减去 30px 的间距 */
  display: flex;
  justify-content: space-between;
  align-items: center;/*垂直居中对齐*/
  height: 64px;
  background:  #004170;
}

.el-menu-vertical-demo {
  width: 200px;
}


.el-menu--horizontal >>> .el-menu{
  border-bottom: none !important; /* 覆盖默认下划线样式 */
}

.el-menu--horizontal >>> .el-menu-item{
  color: white;
}


.menu {
  position: absolute;
  top: 100%; /* 紧贴按钮底部 */
  left: 0;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: max-content;
}


.el-menu {
  padding: 0px;
  background: transparent;
  color: #FFFFFF;
  --el-menu-hover-bg-color:#3C8DF9;
  --el-color-primary:#ffffff;
  --el-menu-hover-text-color:#ffffff;
  --el-menu-active-color:#ffffff;
}
.el-menu--horizontal>.el-menu-item.is-active{
  border-bottom: none !important; /* 覆盖默认下划线样式 */
}

.el-menu--horizontal>.el-menu-item.is-active:first-child{
  border-bottom: none !important; /* 覆盖默认下划线样式 */
  border-radius: 100px 0 0 0;
}

.el-menu--horizontal.el-menu{
  border-bottom: none !important; /* 覆盖默认下划线样式 */
}

/*左边框*/
.border_left{
  border-left-color: white;
}

/*左右边框*/
.border_left_right{
  border-right-color: white;
}

/* 移除 Submenu 的箭头 */
.el-menu--horizontal .el-submenu .el-submenu__arrow {
  display: none;
}

/* 移除 Menu 的箭头 */
.el-menu .el-menu-item .el-submenu__arrow {
  display: none;
}

.el-sub-menu >>> .el-sub-menu__icon-arrow {
  display: none !important;
  width: 10px
}

.el-menu-item.is-active i{
  color: transparent;
}

.el-menu .el-menu-item .el-submenu__arrow {
  display: none !important;
}

.childStyle{
  color: #ffffff;
  display: flex;
  align-items: center;/*垂直居中对齐*/
  gap: 15px; /* 添加元素之间的间距 */
}

.context-area {
  width: 50px;
  height: 30px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.menu, .sub-menu {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
.menu-item {
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.menu-item:hover {
  background-color: #f5f5f5;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>